<template>
	<a-spin :spinning="loading">
		<a-card>
			<section slot="title">优惠券列表</section>
			<a-row :gutter="16">
				<a-col :span="5">
					<span class="label">ID：</span>
					<a-input :max-length="100" allow-clear v-model="id" placeholder="请输入Id" />
				</a-col>
				<a-col :span="5">
					<span class="label">优惠券名称：</span>
					<a-input :max-length="100" allow-clear v-model="name" placeholder="请输入" />
				</a-col>

				<a-col :span="5">
					<span class="label">优惠类型：</span>
					<a-select v-model="discountType" class="w-full" allow-clear placeholder="请选择">
						<a-select-option v-for="item in discountTypeEnums" :value="item.value" :key="item.value">{{
              item.name
            }}</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="5">
					<span class="label">发布日期：</span>
					<a-range-picker @change="onChange" v-model="ceartTime"/>
				</a-col>

				<a-col :span="8">
					<a-button class="ml-18" type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
					<a-button @click="getEdit" class="mx-8" type="primary">新增</a-button>
					<!-- <a-button type="primary" ghost class="ml-10 border-5" @click="exportTable">导出</a-button> -->
				</a-col>
			</a-row>
			<a-table class="mt-16 order-table" :columns="columns" :data-source="data" :scroll="scroll"
				:pagination="pagination">
				<!-- <template #status="status, data">
					{{ data.status == 1 ? '成功' : '失败' }}
				</template> -->
        <template #takeType='takeType, data'>
          自行领取
        </template>  
        <template #discountType='discountType, data'>
          {{discountTypeList[data.discountType]}}
        </template>
        <template #createTime='createTime, data'>
          {{ $utils.formatTimestamp(data.createTime) }}
        </template>
				<template #action="action, data">
					<div class="flex items-center justify-between">
						<!-- <a-button @click="goCharts(data)" type="primary">
							查看
						</a-button> -->
						<a-button @click="goCharts(data)" type="primary" class="ml-10 mr-10">
							编辑
						</a-button>
						<a-button @click="delect(data)" class="ml-10 mr-10" type="danger">
							删除
						</a-button>

						<!-- <a-button style="background-color: #FFD700;" type="primary">
              重置
            </a-button> -->
					</div>
				</template>
			</a-table>
			<!-- <a-divider  /> -->
		</a-card>
		<create @upload="upload" ref="create"></create>
	</a-spin>
</template>
<script>
	import create from './components/create.vue'
	import {
		getCoupon,couponDelete
	} from '@/api/newPet'
	import {
		tableMixins
	} from '@/utils/mixins'
	export default {
		mixins: [tableMixins],
		components: {
			create
		},
		data() {
			return {
				loading: false,
				tabs: 'select1',
				orderId: undefined,
				ceartTime: [undefined, undefined],
				status: null,
        name:'',
        id:'',
        discountType:'',
				orderStatusEnums: [{
						value: 1,
						name: '成功'
					},
					{
						value: 2,
						name: '失败'
					}
				],
        discountTypeEnums: [{
						value: 1,
						name: '满减'
					},
					{
						value: 2,
						name: '折扣'
					},
					{
						value: 3,
						name: '现金'
					}
				],
        discountTypeList:{1:'满减',2:'折扣',3:'现金'},
				data: [],
				columns: [{
						title: '序号',
						dataIndex: 'id',
						align: 'center',
						width: 50,
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: 'ID',
						dataIndex: 'id',
						align: 'center',
						width: 50,
						scopedSlots: {
							customRender: 'id'
						}
					},
					{
						title: '优惠券名称',
						dataIndex: 'name',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'name'
						}
					},

					{
						title: '发行总量',
						dataIndex: 'totalCount',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'totalCount'
						}
					},
					{
						title: '每人限领个数',
						dataIndex: 'takeLimitCount',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'takeLimitCount'
						}
					},
					{
						title: '领取方式',
						dataIndex: 'takeType',
						align: 'center',
						width: 100,
						scopedSlots: {
							customRender: 'takeType'
						}
					},
					{
						title: '满多少金额可用',
						dataIndex: 'usePrice',
						align: 'center',
						width: 100,
						scopedSlots: {
							customRender: 'usePrice'
						}
					},{
						title: '优惠金额',
						dataIndex: 'discountPrice',
						align: 'center',
						width: 100,
						scopedSlots: {
							customRender: 'discountPrice'
						}
					},
					// {
					// 	title: '商品范围',
					// 	dataIndex: 'productScope',
					// 	align: 'center',
					// 	width: 80,
					// 	scopedSlots: {
					// 		customRender: 'productScope'
					// 	}
					// },
					{
						title: '优惠券类别',
						dataIndex: 'discountType',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'discountType'
						}
					},
					// {
					// 	title: '状态',
					// 	dataIndex: 'status',
					// 	align: 'center',
					// 	width: 80,
					// 	scopedSlots: {
					// 		customRender: 'status'
					// 	}
					// },
					{
						title: '发布时间',
						dataIndex: 'createTime',
						align: 'center',
						width: 80,
						scopedSlots: {
							customRender: 'createTime'
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 160,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				]
			}
		},
		computed: {},
		watch: {},
		async created() {
			this.getData()
		},
		methods: {
			search() {
				this.pageNum = 1
				this.getData()
			},
			upload() {
				this.search()
			},
			delect(data) {
				this.$confirm({
					title: '删除',
					content: `请确认是否删除？`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk: () => {
						// console.log('删除')
						// return
						this.loading = true
						couponDelete({
								id: data.id
							})
							.then(res => {
								this.$message.success('删除成功！')

								this.search()

								this.loading = false
							})
							.finally(() => (this.loading = false))
					}
				})
			},
			goCharts(data) {
				this.$refs.create.open(data)
			},
			getEdit(data) {
				this.$refs.create.open(data)
			},
			getSearchParams() {
				console.log(this.vendorId)
				return {
					pageNo: this.pageNum,
					pageSize: this.rowsNum,
          name: this.name,
          status: this.status,
          id: this.id,
          discountType: this.discountType,
          // ceartTime: this.ceartTime[0]+','+this.ceartTime[1],
					startTime: this.$utils.getStartTime(this.ceartTime[0]),
					endTime: this.$utils.getEndTime(this.ceartTime[1])
				}
			},
			getData() {
				this.loading = true
				getCoupon(this.getSearchParams()).then(res=>{
					this.data=res.list;
					this.total=res.taotal;
				}).finally(() => this.loading = false)
			},
			reset() {
				this.ceartTime = [undefined, undefined]
        this.name = ''
        this.id = ''
        this.discountType = ''
        this.status = ''
			}
		}
	}
</script>
<style lang="less" scoped>
	.ant-col {
		margin-bottom: 20px;
		display: flex;
		align-items: center;

		.label {
			flex-shrink: 0;
			width: 86px;
			text-align: right;
			font-size: 14px;
			color: #595959;
		}

		.w-full {
			flex: 1;
		}
	}
</style>